<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">{{isEdit ? '编辑提醒' : '新增提醒'}}</view>
            <view class="right">
                <text class="save" @click="saveReminder">保存</text>
            </view>
        </view>
        
        <!-- 表单内容 -->
        <view class="form-content">
            <!-- 药品类型 -->
            <view class="form-item">
                <view class="label">药品类型</view>
                <view class="type-list">
                    <view 
                        class="type-item" 
                        v-for="(item, index) in medicationTypes" 
                        :key="index"
                        :class="{ active: reminder.type === item.value }"
                        @click="selectType(item)"
                    >
                        <view class="icon" :style="{ backgroundColor: item.color }">
                            <u-icon :name="item.icon" size="32" color="#fff"></u-icon>
                        </view>
                        <text>{{item.name}}</text>
                    </view>
                </view>
            </view>
            
            <!-- 药品名称 -->
            <view class="form-item">
                <view class="label">药品名称</view>
                <input 
                    type="text" 
                    v-model="reminder.name" 
                    placeholder="请输入药品名称"
                    class="input"
                />
            </view>
            
            <!-- 服用说明 -->
            <view class="form-item">
                <view class="label">服用说明</view>
                <textarea 
                    v-model="reminder.desc" 
                    placeholder="请输入服用说明，如：饭后服用，一天两次"
                    class="textarea"
                ></textarea>
            </view>
            
            <!-- 服用时间 -->
            <view class="form-item">
                <view class="label">服用时间</view>
                <view class="picker" @click="showTimePicker">
                    <text>{{formatTime(reminder.time)}}</text>
                    <u-icon name="arrow-right" size="24" color="#999"></u-icon>
                </view>
            </view>
            
            <!-- 重复周期 -->
            <view class="form-item">
                <view class="label">重复周期</view>
                <view class="week-select">
                    <view 
                        class="week-item" 
                        v-for="(item, index) in weekItems" 
                        :key="index"
                        :class="{ active: reminder.days.includes(item.value) }"
                        @click="toggleWeekDay(item.value)"
                    >
                        {{item.text}}
                    </view>
                </view>
            </view>
            
            <!-- 开启提醒 -->
            <view class="form-item switch-item">
                <view class="label">开启提醒</view>
                <u-switch 
                    v-model="reminder.active" 
                    size="24"
                    active-color="#1890FF"
                ></u-switch>
            </view>
        </view>
        
        <!-- 时间选择器弹窗 -->
        <u-picker 
            mode="time" 
            v-model="showTime" 
            :params="timeParams" 
            @confirm="confirmTime" 
            @cancel="cancelTime"
        ></u-picker>
    </view>
</template>

<script>
export default {
    data() {
        return {
            isEdit: false,
            reminder: {
                id: null,
                type: 'medicine',
                name: '',
                desc: '',
                time: new Date(),
                days: [1, 2, 3, 4, 5, 6, 7], // 默认每天
                active: true
            },
            medicationTypes: [
                {
                    name: '降压药',
                    value: 'bp',
                    icon: 'heart',
                    color: '#FF4D4F'
                },
                {
                    name: '降糖药',
                    value: 'bs',
                    icon: 'medicine',
                    color: '#52C41A'
                },
                {
                    name: '运动',
                    value: 'sport',
                    icon: 'sport',
                    color: '#722ED1'
                },
                {
                    name: '药品',
                    value: 'medicine',
                    icon: 'medicine',
                    color: '#1890FF'
                }
            ],
            weekItems: [
                { text: '一', value: 1 },
                { text: '二', value: 2 },
                { text: '三', value: 3 },
                { text: '四', value: 4 },
                { text: '五', value: 5 },
                { text: '六', value: 6 },
                { text: '日', value: 7 }
            ],
            showTime: false,
            timeParams: {
                hour: true,
                minute: true,
                second: false
            }
        }
    },
    onLoad(options) {
        if (options.id) {
            this.isEdit = true
            this.getReminderDetail(options.id)
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        getReminderDetail(id) {
            // 模拟获取提醒详情
            // 实际使用时应从数据库或缓存中获取数据
            const time = new Date()
            time.setHours(8)
            time.setMinutes(30)
            this.reminder = {
                id: parseInt(id),
                type: 'bp',
                name: '降压药',
                desc: '早餐后服用，一天一次',
                time: time,
                days: [1, 2, 3, 4, 5, 6, 7],
                active: true
            }
        },
        selectType(type) {
            this.reminder.type = type.value
        },
        toggleWeekDay(day) {
            const index = this.reminder.days.findIndex(d => d === day)
            if (index > -1) {
                if (this.reminder.days.length > 1) { // 至少保留一天
                    this.reminder.days.splice(index, 1)
                }
            } else {
                this.reminder.days.push(day)
            }
        },
        formatTime(date) {
            const hours = new Date(date).getHours().toString().padStart(2, '0')
            const minutes = new Date(date).getMinutes().toString().padStart(2, '0')
            return `${hours}:${minutes}`
        },
        showTimePicker() {
            this.showTime = true
        },
        confirmTime(e) {
            const { hour, minute } = e
            const time = new Date(this.reminder.time)
            time.setHours(hour)
            time.setMinutes(minute)
            this.reminder.time = time
            this.showTime = false
        },
        cancelTime() {
            this.showTime = false
        },
        saveReminder() {
            // 表单验证
            if (!this.reminder.name.trim()) {
                uni.showToast({
                    title: '请输入药品名称',
                    icon: 'none'
                })
                return
            }
            
            if (!this.reminder.desc.trim()) {
                uni.showToast({
                    title: '请输入服用说明',
                    icon: 'none'
                })
                return
            }
            
            // 模拟保存
            uni.showLoading({
                title: '保存中...'
            })
            
            setTimeout(() => {
                uni.hideLoading()
                uni.showToast({
                    title: '保存成功',
                    icon: 'success'
                })
                
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)
            }, 1000)
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
        
        .save {
            font-size: 28rpx;
            color: #1890FF;
        }
    }
    
    .form-content {
        padding: 30rpx;
        
        .form-item {
            background-color: #fff;
            border-radius: 10rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .label {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 20rpx;
            }
            
            .type-list {
                display: flex;
                flex-wrap: wrap;
                margin: 0 -10rpx;
                
                .type-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 25%;
                    padding: 10rpx;
                    box-sizing: border-box;
                    
                    &.active {
                        .icon {
                            transform: scale(1.1);
                        }
                        
                        text {
                            color: #1890FF;
                        }
                    }
                    
                    .icon {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 10rpx;
                        transition: transform 0.3s;
                    }
                    
                    text {
                        font-size: 24rpx;
                        color: #666;
                    }
                }
            }
            
            .input {
                height: 80rpx;
                background-color: #F7F7FA;
                border-radius: 10rpx;
                padding: 0 20rpx;
                font-size: 28rpx;
                color: #333;
            }
            
            .textarea {
                width: 100%;
                height: 160rpx;
                background-color: #F7F7FA;
                border-radius: 10rpx;
                padding: 20rpx;
                font-size: 28rpx;
                color: #333;
                line-height: 1.6;
            }
            
            .picker {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 80rpx;
                background-color: #F7F7FA;
                border-radius: 10rpx;
                padding: 0 20rpx;
                
                text {
                    font-size: 28rpx;
                    color: #333;
                }
            }
            
            .week-select {
                display: flex;
                justify-content: space-between;
                
                .week-item {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #F7F7FA;
                    font-size: 28rpx;
                    color: #666;
                    
                    &.active {
                        background-color: #1890FF;
                        color: #fff;
                    }
                }
            }
            
            &.switch-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .label {
                    margin-bottom: 0;
                }
            }
        }
    }
}
</style> 